<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Login</title>
  <link rel="stylesheet" href="resource/bootstrap/css/bootstrap.min.css">
  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
  <script src="resource/jquery/jquery-3.3.1.min.js" type="text/javascript"></script>
  <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  <script src="resource/bootstrap/js/bootstrap.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    html, body {
      height: 100%;
    }
    body {
      background-image: url('picture/1.png');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
    }
    .container {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .login-wrapper {
      background-color: rgba(255, 255, 255, 0.7);
      background-color: #fff;
      width: 360px;
      padding: 20px 40px;
      border-radius: 10px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }
    .header {
      font-size: 24px;
      font-weight: 500;
      text-align: center;
      margin-bottom: 25px;
    }
    .input-item, .btn, .refresh-captcha {
      font-size: 14px;
    }
    .input-item {
      display: block;
      width: 100%;
      padding: 6px 12px;
      margin-bottom: 10px;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
    }
    .btn {
      text-align: center;
      padding: 10px;
      width: 100%;
      margin-top: 20px;
      background-color: #007bff;
      border: none;
      border-radius: 4px;
      color: #fff;
      cursor: pointer;
    }
    .msg {
      text-align: center;
      margin-top: 20px;
    }
    a {
      text-decoration-line: none;
      color: #007bff;
      cursor: pointer;
    }
    .captcha-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    .captcha-image {
      margin-right: 5px;
      display: inline-block;
      height: 30px; /* 您可以根据需要调整这个值 */
      width: auto;
    }
    .refresh-captcha {
      background-color: white;
      border: 1px solid #007bff;
      border-radius: 4px;
      color: #007bff;
      padding: 4px 8px;
      outline: none;
      cursor: pointer;
    }
  </style>
</head>

<body>
<div class="container">

  <div class="login-wrapper">
    <div class="header">曼巴-学生后台管理系统</div>
    <div class="form-wrapper">
      <input type="text" id="username" placeholder="username" class="input-item">
      <input type="password" id="password" placeholder="password" class="input-item">
      <!-- 添加验证码部分 -->
      <input type="text" id="login-captcha" placeholder="验证码" class="input-item">
      <div class="captcha-container">
        <img src="picture/2.png" alt="captcha" id="login-captcha-image" class="captcha-image">
        <button type="button" id="refresh-login-captcha" class="btn refresh-captcha">刷新验证码</button>
      </div>
      <!-- 验证码部分结束 -->
      <button id="login-btn"  class="btn">登录</button>
    </div>

    <div class="msg">
      没有账号?
      <a href="#" data-toggle="modal" data-target="#register-modal">注册</a>
    </div>
  </div>
  <!--注册模拟框-->
  <div class="modal fade" id="register-modal" tabindex="-1" role="dialog" aria-labelledby="register-modal-label" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="register-modal-label">注册</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="register-username">用户名</label>
              <input type="text" class="form-control" id="register-username" placeholder="请输入您的用户名">
            </div>
            <div class="form-group">
              <label for="register-password">密码</label>
              <input type="password" class="form-control" id="register-password" placeholder="请输入您的密码">
            </div>
            <div class="form-group">
              <label for="register-password-confirm">确认密码</label>
              <input type="password" class="form-control" id="register-password-confirm" placeholder="请确认您的密码">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" id="register-btn">注册</button>
        </div>
      </div>
    </div>
  </div>

</div>
</body>
<script type="text/javascript">
  $(document).ready(function() {
    /**
     * 登录
     */
    $("#login-btn").click(function(e) {
      // 阻止默认提交表单行为
      e.preventDefault();

      // 获取用户输入的用户名和密码
      var username = $("#username").val();
      var password = $("#password").val();

      // 验证用户名和密码
      if (username === "" || password === "") {
        alert("用户名或密码不能为空！");
        return;
      }

      // 发送POST请求到Spring Boot API
      $.ajax({
        url: "http://localhost:8080/user/login",
        type: "POST",
        dataType: "json",
        contentType: "application/json",
        data: JSON.stringify({
          "username": username,
          "password": password
        }),
        success: function(response) {
          // 登录成功，可以执行一些操作，例如跳转到主页
          if (response.message == "ok") {
            localStorage.setItem("loggedInUsername", username);
            window.location.href = "student.html";
          } else {
            // 如果登录失败，显示提示信息
            alert(response.message);
            window.location.href="login.html"
          }
        },
        error: function(xhr, textStatus, errorThrown) {
          // 发生错误时的处理
          alert("登录处理过程中发生问题！");
        }
      });
    });
    /**
     * 注册
     */
    $("#register-btn").click(function(e) {
      // 阻止默认提交表单行为
      e.preventDefault();

      // 获取用户输入的用户名和密码
      var username = $("#register-username").val();
      var password= $("#register-password").val();
      var rePassword= $("#register-password-confirm").val();

      // 验证用户名和密码
      if (username === "" || password === "" || rePassword ==="") {
        alert("用户名或密码不能为空！");
        return;
      }

      // 发送POST请求到Spring Boot API
      $.ajax({
        url: "http://localhost:8080/user/register",
        type: "POST",
        dataType: "json",
        contentType: "application/json",
        data: JSON.stringify({
          "username": username,
          "password": password,
          "rePassword":rePassword
        }),
        success: function(response) {
          // 注册成功，可以执行一些操作，例如跳转到主页
          if (response.message == "ok") {
            alert("注册成功！");
            window.location.href = "login.html";
          } else {
            // 如果注册失败，显示提示信息
            alert(response.message);
          }
        },
        error: function(xhr, textStatus, errorThrown) {
          // 发生错误时的处理
          alert("登录处理过程中发生问题！");
        }
      });
    });
  });
</script>


</html>